<template>
  <div class="home-container">
    <div class="back-button" @click="goBack">
      <i class="fa fa-arrow-left"></i>
      返回
    </div>
    <div class="main-content">
      <!-- 顶部理论说明区域 -->
      <div class="title-section">
        <h1 class="main-title">中医体质理论</h1>
        <div class="theory-section">
          <div class="theory-card">
            <h2>《黄帝内经》的二十五体质学说：体质理论之源</h2>
            <p>黄帝内经将人的体质分为二十五种，强调"阴阳之气，异其性也"，认为体质形成受先天禀赋和后天因素的影响。通过望、闻、问、切四诊合参的方法，可以辨别不同的体质类型。</p>
          </div>
          <div class="theory-card">
            <h2>从《黄帝内经》到现代：王琦教授的九种体质学说</h2>
            <p>王琦教授基于《黄帝内经》提出了九种基本体质类型：平和质、气虚质、阳虚质、阴虚质、痰湿质、湿热质、血瘀质、气郁质和特禀质。这一分类体系在现代中医体质研究中具有重要地位。</p>
          </div>
        </div>
      </div>

    <!-- 图表区域 -->
    <div class="charts-grid">
      <!-- 九大体质玫瑰图 -->
      <div class="chart-card">
        <h3>九大体质分布</h3>
        <div id="constitutionRose" class="chart"></div>
      </div>

      <!-- 亚健康体质和正常体质对比 -->
      <div class="chart-card">
        <h3>亚健康与正常体质对比</h3>
        <div id="healthComparison" class="chart"></div>
      </div>

      <!-- 体质与五行关系图 -->
      <div class="chart-card">
        <h3>体质与五行关系</h3>
        <div id="populationDistribution" class="chart"></div>
      </div>

      <!-- Top10癌症分布 -->
      <div class="chart-card">
        <h3>Top10癌症分布</h3>
        <div id="cancerDistribution" class="chart"></div>
      </div>

      <!-- 体质与五行关系图 -->
      <!-- <div class="chart-card">
        <h3>体质与五行关系</h3>
        <div id="wuxingRelation" class="chart"></div>
      </div> -->
    </div>
  </div>
  </div>
</template>

<script setup>
import { onMounted, nextTick, ref, watch, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';

const router = useRouter();
const isMounted = ref(false);
const charts = ref([]);

const goBack = () => {
  router.push('/');
};

// 初始化所有图表
onMounted(async () => {
  await nextTick();
  isMounted.value = true;
});

// 监听 isMounted 变化，确保在 DOM 加载完成后初始化图表
watch(isMounted, (newVal) => {
  if (newVal) {
    initConstitutionRose();
    initHealthComparison();
    initPopulationDistribution();
    initCancerDistribution();
  }
});

// 组件卸载时销毁所有图表实例
onUnmounted(() => {
  charts.value.forEach(chart => {
    if (chart) {
      chart.dispose();
    }
  });
});

// 九大体质玫瑰图初始化
const initConstitutionRose = () => {
  const chartDom = document.getElementById('constitutionRose');
  if (!chartDom) return;
  
  // 检查是否已存在实例
  const existingChart = echarts.getInstanceByDom(chartDom);
  if (existingChart) {
    existingChart.dispose();
  }
  
  const chart = echarts.init(chartDom);
  charts.value.push(chart);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}%',
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      orient: 'vertical',
      right: '5%',
      top: 'center',
      data: ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质', '特禀质'],
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    series: [{
      name: '体质分布',
      type: 'pie',
      radius: ['20%', '70%'],
      center: ['40%', '50%'],
      roseType: 'area',
      data: [
        { value: 30, name: '平和质' },
        { value: 15, name: '气虚质' },
        { value: 12, name: '阳虚质' },
        { value: 10, name: '阴虚质' },
        { value: 8, name: '痰湿质' },
        { value: 8, name: '湿热质' },
        { value: 7, name: '血瘀质' },
        { value: 6, name: '气郁质' },
        { value: 4, name: '特禀质' }
      ]
    }]
  };
  chart.setOption(option);
  
  // 添加窗口大小变化时的自适应
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 亚健康与正常体质对比图初始化
const initHealthComparison = () => {
  const chartDom = document.getElementById('healthComparison');
  if (!chartDom) return;
  
  const existingChart = echarts.getInstanceByDom(chartDom);
  if (existingChart) {
    existingChart.dispose();
  }
  
  const chart = echarts.init(chartDom);
  charts.value.push(chart);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      data: ['平和体质', '亚健康体质'],
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: ['免疫力', '睡眠质量', '精力充沛度', '情绪稳定性', '消化功能'],
      axisLabel: {
        color: '#fff'
      }
    }],
    yAxis: [{
      type: 'value',
      max: 100,
      axisLabel: {
        color: '#fff'
      }
    }],
    series: [
      {
        name: '平和体质',
        type: 'bar',
        data: [95, 92, 90, 88, 85]
      },
      {
        name: '亚健康体质',
        type: 'bar',
        data: [70, 65, 60, 55, 50]
      }
    ]
  };
  chart.setOption(option);
  
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 体质与五行关系图初始化
const initPopulationDistribution = () => {
  const chartDom = document.getElementById('populationDistribution');
  if (!chartDom) return;
  
  const existingChart = echarts.getInstanceByDom(chartDom);
  if (existingChart) {
    existingChart.dispose();
  }
  
  const chart = echarts.init(chartDom);
  charts.value.push(chart);
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}',
      textStyle: {
        color: '#fff'
      }
    },
    series: [{
      type: 'sankey',
      layout: 'none',
      emphasis: {
        focus: 'adjacency'
      },

      data: [
        // 五行节点
        { name: '木', itemStyle: { color: '#95C37C' } },
        { name: '火', itemStyle: { color: '#FF7875' } },
        { name: '土', itemStyle: { color: '#FAAD14' } },
        { name: '金', itemStyle: { color: '#FFE58F' } },
        { name: '水', itemStyle: { color: '#91D5FF' } },
        // 体质节点
        { name: '平和质', itemStyle: { color: '#91CC75' } },
        { name: '气虚质', itemStyle: { color: '#FAC858' } },
        { name: '阳虚质', itemStyle: { color: '#73C0DE' } },
        { name: '阴虚质', itemStyle: { color: '#EA7CCC' } },
        { name: '痰湿质', itemStyle: { color: '#3BA272' } },
        { name: '湿热质', itemStyle: { color: '#FC8452' } },
        { name: '血瘀质', itemStyle: { color: '#9A60B4' } },
        { name: '气郁质', itemStyle: { color: '#5470C6' } },
        { name: '特禀质', itemStyle: { color: '#EE6666' } }
      ],
      links: [
        // 木
        { source: '木', target: '气郁质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } },
        // 火
        { source: '火', target: '阴虚质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } },
        { source: '火', target: '湿热质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } },
        // 土
        { source: '土', target: '平和质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } },
        { source: '土', target: '气虚质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } },
        { source: '土', target: '痰湿质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } },
        // 金
        { source: '金', target: '特禀质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } },
        // 水
        { source: '水', target: '阳虚质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } },
        { source: '水', target: '血瘀质', value: 1, lineStyle: { color: '#fff', width: 2, opacity: 0.8 } }
      ],
      label: {
        color: '#fff'
      }
    }]
  };
  chart.setOption(option);
  
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// Top10癌症分布图初始化
const initCancerDistribution = () => {
  const chartDom = document.getElementById('cancerDistribution');
  if (!chartDom) return;
  
  const existingChart = echarts.getInstanceByDom(chartDom);
  if (existingChart) {
    existingChart.dispose();
  }
  
  const chart = echarts.init(chartDom);
  charts.value.push(chart);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    xAxis: {
      type: 'value',
      position: 'top'
    },
    yAxis: {
      type: 'category',
      data: ['肺癌', '胃癌', '肝癌', '结直肠癌', '乳腺癌', '食管癌', '胰腺癌', '前列腺癌', '甲状腺癌', '膀胱癌'],

      axisLabel: {
        color: '#fff'
      },
      inverse: true
    },
    series: [{
      name: '发病率',
      type: 'bar',
      data: [20, 18, 16, 14, 12, 10, 8, 6, 4, 2]
    }]
  };
  chart.setOption(option);
  
  window.addEventListener('resize', () => {
    chart.resize();
  });
};

// 体质与五行关系图初始化
const initWuxingRelation = () => {
  const chart = echarts.init(document.getElementById('wuxingRelation'));
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'graph',
      layout: 'circular',
      symbolSize: 50,
      label: {
        show: true
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      data: [
        { name: '木', itemStyle: { color: '#95C37C' } },
        { name: '火', itemStyle: { color: '#FF7875' } },
        { name: '土', itemStyle: { color: '#FAAD14' } },
        { name: '金', itemStyle: { color: '#FFE58F' } },
        { name: '水', itemStyle: { color: '#91D5FF' } }
      ],
      links: [
        { source: '木', target: '火' },
        { source: '火', target: '土' },
        { source: '土', target: '金' },
        { source: '金', target: '水' },
        { source: '水', target: '木' }
      ]
    }]
  };
  chart.setOption(option);
};
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  padding: 0px;
  background: linear-gradient(135deg, #1a1f2c 0%, #2d3748 100%);
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: 'Arial', sans-serif;
}

.back-button {
  position: fixed;
  top: 20px;
  left: 20px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0.3) 100%);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  z-index: 100;
  font-size: 16px;
}

.back-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.main-content {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.title-section {
  margin-top: 5vh;
  margin-bottom: 30px;
}

.main-title {
  font-size: 48px;
  font-weight: bold;
  margin: 0 0 20px;
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  animation: titleFadeIn 1s ease-in-out;
  
  font-family: 'STXingkai', 'Arial', sans-serif;
  letter-spacing: 1px;
}

@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.theory-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0;
  animation: fadeIn 1s ease-in-out 0.4s forwards;
  opacity: 0;
}

.theory-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.theory-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.theory-card h2 {
  font-size: 24px;
  margin-bottom: 15px;
  text-align: center;
  background: linear-gradient(45deg, #f8e8ba, #d09d54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.theory-card p {
  color: #e6e6e6;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
  text-indent: 2em;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
  animation: fadeIn 1s ease-in-out 0.6s forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chart-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.chart-card h3 {
  color: #fff;
  font-size: 20px;
  margin-bottom: 15px;
  text-align: center;
}

.chart {
  height: 300px;
  width: 100%;
}
</style>